<template>
     <el-container ref="container">
          <el-header style="height: auto">
               <!-- 按钮集合 -->
               <buttonGroup :buttonGroups="buttonGroups" />
          </el-header>

          <el-main>
               <tableView :viewData="viewData" :columnConfigs="columnConfigs" v-model="selectData">
               </tableView>
          </el-main>
     </el-container>
</template>

<script>
    import buttonGroup from "@/components/button/group";
    import tableView from "@/components/table/view";
    export default {
        components: {
            "buttonGroup": buttonGroup,
            "tableView": tableView,
        },
        data() {
            return {
                currentPage4: 4,

                buttonGroups: [{
                    icon: "el-icon-plus",
                    text: "添 加",
                    type: "primary",
                    _click: () => {
                        console.log(111);
                    },
                }, {
                    icon: "el-icon-search",
                    text: "搜 索",
                    type: "primary",
                    _click: () => {},
                }, ],
                searchForm: {
                    type: "",
                    UnifiedExaminPredictName: "",
                    region: "",
                },
                selectData: [],
                viewData: {
                    Data: [{
                        date: "2016-05-03",
                        name: "王小虎",
                        province: "上海",
                        city: "普陀区",
                        address: "上海市普陀区金沙江路 1518 弄",
                        zip: 200333,
                    }, {
                        date: "2016-05-02",
                        name: "王小虎",
                        province: "上海",
                        city: "普陀区",
                        address: "上海市普陀区金沙江路 1518 弄",
                        zip: 200333,
                    }, {
                        date: "2016-05-04",
                        name: "王小虎",
                        province: "上海",
                        city: "普陀区",
                        address: "上海市普陀区金沙江路 1518 弄",
                        zip: 200333,
                    }, {
                        date: "2016-05-01",
                        name: "王小虎",
                        province: "上海",
                        city: "普陀区",
                        address: "上海市普陀区金沙江路 1518 弄",
                        zip: 200333,
                    }, {
                        date: "2016-05-08",
                        name: "王小虎",
                        province: "上海",
                        city: "普陀区",
                        address: "上海市普陀区金沙江路 1518 弄",
                        zip: 200333,
                    }, {
                        date: "2016-05-06",
                        name: "王小虎",
                        province: "上海",
                        city: "普陀区",
                        address: "上海市普陀区金沙江路 1518 弄",
                        zip: 200333,
                    }, {
                        date: "2016-05-07",
                        name: "王小虎",
                        province: "上海",
                        city: "普陀区",
                        address: "上海市普陀区金沙江路 1518 弄",
                        zip: 200333,
                    }, ],
                },
                columnConfigs: [{
                    prop: "id",
                    type: "selection",
                }, {
                    prop: "date",
                    label: "时间",
                    iconText: true,
                    icon: "el-icon-time",
                }, {
                    prop: "name",
                    label: "姓名",
                    popover: true,
                    html: (index, row) => {
                        let html = "";
                        html += " <p>姓名:" + row.name + "</p>";
                        html += " <p>住址:" + row.address + "</p>";
                        return html;
                    },
                }, {
                    prop: "",
                    label: "地址",
                    columConfigs: [{
                        prop: "province",
                        label: "省份",
                    }, {
                        prop: "city",
                        label: "市区",
                        createScopeTemplate: (row) => {
                            let listScopeTemplate = [];
                            let obj = {
                                componentName: 'form-tag',
                                type: "primary"
                            };
                            obj.type = row.tag === "市区" ? "primary" : "success";
                            listScopeTemplate.push(obj)

                            return listScopeTemplate;
                        },
                        //     listScopeTemplate: [{
                        //             componentName: 'form-tag',
                        //             _click: (index, row) => {
                        //                 this.$message({
                        //                     message: "恭喜你，您点击了第" + (index + 1) + "行的操作按钮",
                        //                     type: "success",
                        //                 });
                        //             }
                        //         }]
                        //     _render: (index, row) => {
                        //         return row.tag === "市区" ? "primary" : "success";
                        //     },
                    }, {
                        prop: "address",
                        label: "地址",
                    }, {
                        prop: "zip",
                        label: "邮编",
                    }, ],
                }, {
                    prop: "",
                    label: "操作",
                    listScopeTemplate: [{
                        componentName: 'button-input',
                        icon: "el-icon-edit",
                        type: "success",
                        _click: (index, row) => {
                            this.$message({
                                message: "恭喜你，您点击了第" + (index + 1) + "行的操作按钮",
                                type: "success",
                            });
                        },
                    }, {
                        componentName: 'button-input',
                        icon: "el-icon-delete",
                        type: "success",
                        iconColor: "blue",
                        popconfirm: true,
                        title: "您好啊，您点击了我哦！！！",
                        _click: (index, row) => {
                            this.$message({
                                message: "恭喜你，您点击了第" + (index + 1) + "行的操作按钮",
                                type: "success",
                            });
                        },
                        _confirm: (scope) => {
                            console.log(111, scope);
                        },
                    }, ],
                }, ],
            };
        },
        created() {},
        mounthed() {},
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
        },
        watch: {},
    };
</script>